<!-- 积分转增 -->
<template>
	<view class="transfer-wrap">
		<!-- 钱包卡片 -->
		<view class="wallet-wrap">
			<view class="nav-box">
				<cu-custom isBack>
					<block slot="backText"><text class="head-title">积分转赠</text></block>
				</cu-custom>
			</view>
			<view class="wallet-box">
			
			<view class="wallet-card">
				<view class="head-box x-f">
					<view class="head-title">总积分</view>
					<button class="cu-btn look-btn" @tap="onEye">
						<text v-if="showMoney" class="cuIcon-attentionfill"></text>
						<text v-else class="cuIcon-attentionforbidfill"></text>
					</button>
				</view>
				<view class="card-num">{{ showMoney ? userInfo.novice_score || '0.00' : '***' }}</view>
			</view>
	</view>
	
	</view>
	<view class="transfer-title">
		<text class="line">
		</text>积分转赠
	</view>
 <view class="transfer-form"> 
	 <view class="form-item">
	 	<input type="text" class="uni-input" v-model="form.novice_score" placeholder="输入转赠的积分" placeholder-class="placeholder-style"   />
	 </view>
 	              <view class="form-item search-form-item">
				  <input type="text" v-model="key"  placeholder="请输入对方uid" placeholder-class="placeholder-style" />
 	            <button class="search-btn" :class="{ 'active': key }" @tap="onSearch">搜索</button>  
				</view>
				<view class="search-list" v-show="key&&showSearch">
					<view class="search-item">
						<image class="log-img" :src="searchResult.uAvatar" mode=""></image>
					<view class="log-name">{{searchResult.nickname}}</view>
					</view>
				</view>
				<button form-type="submit"  class="submit-btn" @tap="onSubmit">确认转赠</button>
				 
 </view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			userInfo: uni.getStorageSync('userInfo'),
			showMoney: true, //是否显示金额
			key:'',//搜索uid
			searchResult:{
				uAvatar:'http://api.7wpp.com/assets/addons/shopro/img/default-avatar.png',
				nickname:''
			},
			showSearch:false,//是否显示搜索结果
			form:{
			novice_score:''	,//转赠积分
			uid:uni.getStorageSync('userInfo').user_id,//转送人 id
			zid:''//接受人 id
			}
		};
	},
	computed: {},
	onLoad() {
	},
	methods: {
		onSearch(){
			this.$api('commission.byIdGetUserInfo', {
				uid: this.key
			}).then(res => {
				if(res.data.id){
					this.searchResult.nickname=res.data.nickname;
					this.showSearch=true;
					this.form.zid=res.data.id;
				}else{		
				uni.showToast({
					title: res.msg
				})	
				}
				})
		},
		  onSubmit() {  
			  if(!this.form.zid){
				  uni.showToast({
				  	title: '对方uid不存在',
				  	icon: 'none'
				  })
			  };
		                this.$api('commission.moveNoviceScore', 
		                	this.form
		                ).then(res => {
							if(res.code===1){
								uni.showToast({
									title: res.msg
								})
								this.key='';
								this.form.zid='';
								this.form.novice_score='';
								this.form.showSearch=false;
							}
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
					
							})
		            }  ,
		// 是否显示金额
		onEye() {
			this.showMoney = !this.showMoney;
		},

 
		 
	}
};
</script>

<style lang="scss">
 
 
	.nav-box {
		color: #fff;
		font-size: 40rpx;

		/deep/ .cu-back {
			color: #fff;
			font-size: 40rpx;
		}
	}
// 钱包卡片
.wallet-wrap {
		background: url($IMG_URL+'/imgs/commission/commission_bg1.jpg') no-repeat;
		background-size: cover;
		height: 100%;
		width: 100%;
		overflow: hidden;
}
.transfer-title{
font-size: 32rpx;
font-weight: 400;
line-height: 45rpx;
color: #000000;
position: relative;
padding: 40rpx 50rpx 0 50rpx; 
}
.transfer-title text
{
	width: 10rpx;
position: absolute;
top:46rpx;
left:30rpx;
	height: 30rpx;
	margin-right: 8rpx;
	background: rgba(109, 95, 208, 1);
	opacity: 1;
	line-height: 45rpx;
	display: inline-block;
	border-radius: 5rpx;
}
.wallet-card {
	width: 690rpx;
	height: 301rpx;
	background: url($IMG_URL+'/imgs/commission/commission_card_bg.png') no-repeat;
	background-size: 100% 100%;
	border-radius: 20rpx;
	padding: 30rpx;
	position: relative;
	.head-box {
		margin-bottom: 20rpx;
		.head-title {
			font-size: 24rpx;
			font-weight: 400;
			color: #ffffff;
		}
		.look-btn {
			color: #fff;
			font-size: 30rpx;
			background: none;
			padding: 0;
			margin-left: 20rpx;
			.cuIcon-attentionfill,
			.cuIcon-attentionforbidfill {
				line-height: 30rpx;
			}
			.cuIcon-attentionfill {
				line-height: 30rpx;
			}
		}
	}
	.card-num {
		font-size: 40rpx;
		font-weight: 500;
		color: #fefefe;
		margin-bottom: 30rpx;
	}
}
.wallet-box{
	padding: 30rpx;
}
.search-list{
	width: 100%;
	background: rgba(255, 255, 255, 0.39);
	border: 1rpx solid #DDDDDD;
	opacity: 1;
	border-radius: 30rpx;
	margin-top: 20rpx;
}
.transfer-form{
	padding:20rpx 50rpx;
}
.form-item{
	margin-top: 20rpx;
}
.form-item input{
	width: 100%;
	box-sizing:border-box;
	height: 70rpx;
	background: rgba(255, 255, 255, 0.39);
	border: 1rpx solid #DDDDDD;
	opacity: 1;
	padding: 16rpx 30rpx;
	border-radius: 40px;
}
 
.search-item{
	margin: 16rpx 30rpx;
}
.search-form-item{ 
	position: relative;
}
.search-btn{
	width: 150rpx;
	z-index: 1000;
	position: absolute;
	right: 0;
	top:1rpx;
	height: 66rpx;
	font-size: 28rpx;

	font-weight: 400;
	line-height: 66rpx;
	color: #FFFFFF;
background: #DDDDDD;
	border-radius: 50px;
}
.placeholder-style{
	color: #777777;
	font-size: 24rpx;
}
.search-btn:after{
		border:none;
}
.search-btn.active{
		background: rgba(109, 95, 208, 1);
}
.submit-btn{
	width: 100%;
	height: 90rpx;
	background: linear-gradient(270deg, #4B38D5 0%, #755FD0 100%);
	opacity: 1;
	font-size: 30rpx;
	font-weight: 400;
	line-height: 90rpx;
	color: #FFFFFF;
	border-radius: 30rpx;
	margin-top: 70rpx;
}
.log-img {
			width: 80rpx;
			height: 39rpx;
			
			height: 80rpx;
			border-radius: 50%;
		 
		}
		.log-name {
			font-size: 28rpx;
			color: #333333;
			margin-top: 12rpx;
		}
 
</style>
